<template>
    <view class="bottom">
        <Header></Header>
        <view class="back">
            <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                    name="arrow-left" color="#00eaff" @click="back"></u-icon>
            <text style="color: #00eaff;padding-right: 30rpx">ROLL</text>
        </view>
        <view class="button-group">
            <view v-for="(button, index) in buttons" :key="index" class="button-item"
                  :class="{ 'active': selectedSaleAnalysis === button.id }" @click="handleButtonClick(button)">
                {{ button.name }}
            </view>
        </view>
        <view class="roomView">
            <room-list :roomList="roomList"></room-list>
        </view>
        <view class="no-more">
            <view v-if="noMore">
                <u-divider style="padding: 30rpx" bg-color="#0f0e2d">There's no more data left</u-divider>
            </view>
        </view>
        <!-- 回到顶部 -->
        <u-back-top :scroll-top="scrollTop"></u-back-top>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";
import RoomList from "@/components/roomList/roomList.vue";

export default {
    name: "exercise",
    components: {
        CustomTabbar,
        Header,
        RoomList
    },
    data() {
        return {
            windowsWidth: 0,
            // 顶部按钮
            selectedSaleAnalysis: '',
            // 分类 button
            buttons: [],
            // 福利房列表
            roomList: [],
            // 是否到底
            noMore: false,
            // room列表
            current_page: 1,
            last_page: 0,
            total: '',
            // 滚动距离
            scrollTop: 0,
        };
    },
    created() {
        this.getRoomCategory();
    },
    // 滚动监听
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    // 触底加载更多
    onReachBottom() {
        this.current_page++;
        this.$u.api.getRoomList({
            page: this.current_page,
            category_id: this.selectedSaleAnalysis
        }).then(res => {
            if (res.code === 1) {
                // 没数据
                if (res.data.data.length === 0) {
                    this.noMore = true;
                    return
                }
                this.noMore = false;
                this.roomList = this.roomList.concat(res.data.data)
                this.total = res.data.total
                this.current_page = res.data.current_page
                this.last_page = res.data.last_page
            }
        })
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
    },
    methods: {
        // 返回
        back() {
            this.$u.route({
                type: 'navigateBack',
                delta: 1
            })
        },
        // 获取福利房分类
        getRoomCategory() {
            this.$u.api.getRoomCategory().then(res => {
                if (res.code === 1) {
                    this.buttons = res.data
                    this.selectedSaleAnalysis = res.data[0].id;
                    this.getRoomList();
                }
            })

        },
        // 切换按钮
        async handleButtonClick(button) {
            this.selectedSaleAnalysis = button.id; //切换选中的button
            await this.getRoomList();
        },
        // 获取房间列表
        getRoomList() {
            this.current_page = 1
            this.$u.api.getRoomList({
                page: this.current_page,
                category_id: this.selectedSaleAnalysis
            }).then(res => {
                if (res.code === 1) {
                    // 没数据
                    if (res.data.data.length === 0) {
                        this.noMore = true;
                        this.roomList = []
                        return
                    }
                    this.noMore = false;
                    this.roomList = res.data.data
                    this.total = res.data.total
                    this.current_page = res.data.current_page
                    this.last_page = res.data.last_page
                }
            })
        }

    },
}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.button-group {
    display: flex;
    margin: 20rpx 30rpx;

    .button-item {
        flex: 1;
        text-align: center;
        padding: 10px;
        border: 1px solid #ccc;
        border-left: none;
        cursor: pointer;
    }
}

.button-group .button-item:first-child {
    border-radius: 20px 0 0 20px;
    border-left: 1px solid #ccc;
}

.button-group .button-item:last-child {
    border-radius: 0 20px 20px 0;
}

.button-group .button-item:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.active {
    background-color: #007aff;
    color: #fff;
    border: none;
    border-top: 1px solid #007aff;
    border-bottom: 1px solid #007aff;
}

.roomView {
}

.no-more {
    //height: 100vh;
}
</style>
